<template>
  <uni-popup ref="popupRef" type="bottom" background-color="#fff">
    <view class="merchant-selector">
      <view class="selector-header">
        <text class="header-title">选择商户</text>
        <uni-icons
          type="closeempty"
          size="20"
          color="#666"
          @click="close"
        ></uni-icons>
      </view>
      <view class="merchant-list">
        <view
          v-for="merchant in merchants"
          :key="merchant.id"
          class="merchant-item"
          :class="{ active: merchant.id === selectedMerchantId }"
          @click="selectMerchant(merchant)"
        >
          <view class="merchant-info">
            <text class="merchant-name">{{ merchant.name }}</text>
            <view v-if="merchant.status === 'active'" class="status-badge">
              使用中
            </view>
          </view>
          <uni-icons
            v-if="merchant.id === selectedMerchantId"
            type="checkmarkempty"
            size="20"
            color="#FFB200"
          ></uni-icons>
        </view>
      </view>
    </view>
  </uni-popup>
</template>

<script setup>
import { ref } from "vue";

// Emits
const emit = defineEmits(["select"]);

// 弹窗引用
const popupRef = ref(null);

// 当前选中的商户ID
const selectedMerchantId = ref(1);

// 商户列表
const merchants = ref([
  { id: 1, name: "中金子商户", status: "active" },
  { id: 2, name: "汇付天商户", status: "inactive" },
  { id: 3, name: "正付大商户", status: "inactive" },
]);

// 打开弹窗
const open = (currentMerchantId) => {
  if (currentMerchantId) {
    selectedMerchantId.value = currentMerchantId;
  }
  popupRef.value.open();
};

// 关闭弹窗
const close = () => {
  popupRef.value.close();
};

// 选择商户
const selectMerchant = (merchant) => {
  selectedMerchantId.value = merchant.id;
  emit("select", merchant);
  close();
};

// 暴露方法
defineExpose({
  open,
  close,
});
</script>

<style lang="scss" scoped>
.merchant-selector {
  background-color: #fff;
  border-radius: 20rpx 20rpx 0 0;
  padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
}

.selector-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx 40rpx;
  border-bottom: 1rpx solid #f0f0f0;
}

.header-title {
  font-size: 32rpx;
  font-weight: 600;
  color: #333;
}

.merchant-list {
  padding: 0 40rpx;
}

.merchant-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 28rpx 0;
  border-bottom: 1rpx solid #f0f0f0;

  &:last-child {
    border-bottom: none;
  }

  &:active {
    background-color: #f9f9f9;
  }
}

.merchant-info {
  display: flex;
  align-items: center;
  gap: 12rpx;
}

.merchant-name {
  font-size: 28rpx;
  color: #333;
}

.status-badge {
  background-color: #00c48c;
  padding: 8rpx 12rpx;
  border-radius: 6rpx;
  font-size: 22rpx;
  color: #fff;
  line-height: 1;
}
</style>
